<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="full-screen" content="yes">
    <title>微场景H5-陈广安</title>
    <link rel="stylesheet" href="./static/plug_in/fullpage/jquery.fullPage.css">
    <link rel="stylesheet" href="./static/css/fullpage.css">
</head>
<body>
<!-- <div class="position">
    <h1>哈哈哈哈哈</h1>
</div> -->
<!--代码部分begin-->
<div id="lanren">
    <div id="audio-btn" class="on" onclick="changeClass(this,'media')">
        <audio loop="loop" autoplay src="http://qn.tool.88an.top/4.mp3" id="media" preload="preload"></audio>
    </div>
</div>
<ul id="menu">
    <li data-menuanchor="page1" class="active"><a href="#page1">1</a></li>
    <li data-menuanchor="page2"><a href="#page2">2</a></li>
    <li data-menuanchor="page3"><a href="#page3">3</a></li>
    <li data-menuanchor="page4"><a href="#page4">4</a></li>
    <li data-menuanchor="page5"><a href="#page5">5</a></li>
    <li data-menuanchor="page6"><a href="#page6">6</a></li>
    <li data-menuanchor="page7"><a href="#page7">7</a></li>
    <li data-menuanchor="page8"><a href="#page8">8</a></li>
</ul>
<div id="dowebok">
    <div class="section s1">
        <div class="box-1"><img src="./static/img/fullpage/35.png" alt="陈广安-个人开发"></div>
        <div class="box-2"><img src="./static/img/fullpage/40.png" alt="陈广安-个人开发"></div>
        <div class="box-3"><img src="./static/img/fullpage/41.png" alt="陈广安-个人开发"></div>
        <div class="box-4"><img src="./static/img/fullpage/43.png" alt="陈广安-个人开发"></div>
        <div class="box-5"><img src="./static/img/fullpage/43.png" alt="陈广安-个人开发"></div>
        <div class="box-6"><img src="./static/img/fullpage/43.png" alt="陈广安-个人开发"></div>
        <div class="box-7"><img src="./static/img/fullpage/44.png" alt="陈广安-个人开发"></div>
        <div class="box-8"><img src="./static/img/fullpage/45.png" alt="陈广安-个人开发"></div>
        <div class="box-9"><img src="./static/img/fullpage/2.jpg" alt="陈广安-个人开发"></div>
        <div class="box-10">2017-9-12 23:01:02</div>
        <div class="box-11">2017-9-12 23:01:02</div>
        <div class="box-12">2017-9-12 23:01:02</div>
        <div class="box-13"><img src="./static/img/fullpage/20.png" alt="陈广安-个人开发"></div>
        <div class="box-14"><img src="./static/img/fullpage/22.png" alt="陈广安-个人开发"></div>
    </div>
    <div class="section s2">
        <div class="box-7"><img src="./static/img/fullpage/17.png" alt="陈广安-个人开发"></div>
        <div class="box-1"><img src="./static/img/fullpage/12.png" alt="陈广安-个人开发"></div>
        <div class="box-2"><img src="./static/img/fullpage/11.png" alt="陈广安-个人开发"></div>
        <div class="box-3"><img src="./static/img/fullpage/3.jpg" alt="陈广安-个人开发"></div>
        <div class="box-6"><img src="./static/img/fullpage/16.png" alt="陈广安-个人开发"></div>
        <div class="box-4"><img src="./static/img/fullpage/13.png" alt="陈广安-个人开发"></div>
        <div class="box-5"><img src="./static/img/fullpage/15.png" alt="陈广安-个人开发"></div>
        <div class="box-8"><img src="./static/img/fullpage/18.png" alt="陈广安-个人开发"></div>
    </div>
    <div class="section s3">
        <div class="box-2"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-3"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-4"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-5"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-6"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-7"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-8"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-9"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-10"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-11"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-12"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-13"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-14"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-15"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-16"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-17"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-19"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-18"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-20"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-21"><img src="./static/img/fullpage/101.png" alt="陈广安-个人开发"></div>
        <div class="box-1"><img src="./static/img/fullpage/19.png" alt="陈广安-个人开发"></div>
    </div>
    <div class="section s4">
        <div class="box-22"><img src="./static/img/fullpage/50.png" alt="陈广安-个人开发"></div>
        <div class="box-23"><img src="./static/img/fullpage/49.png" alt="陈广安-个人开发"></div>
        <div class="box-24"><img src="./static/img/fullpage/52.png" alt="陈广安-个人开发"></div>
        <div class="box-25"><img src="./static/img/fullpage/47.png" alt="陈广安-个人开发"></div>
        <div class="box-26"><img src="./static/img/fullpage/48.png" alt="陈广安-个人开发"></div>
        <div class="box-27"><img src="./static/img/fullpage/52.png" alt="陈广安-个人开发"></div>
        <div class="box-28"><img src="./static/img/fullpage/51.png" alt="陈广安-个人开发"></div>
        <div class="box-29"><img src="./static/img/fullpage/53.png" alt="陈广安-个人开发"></div>
        <div class="box-30"><img src="./static/img/fullpage/54.png" alt="陈广安-个人开发"></div>
        <div class="box-31"><img src="./static/img/fullpage/55.png" alt="陈广安-个人开发"></div>
        <div class="box">
            <div class="box-1"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-2"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-3"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-4"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-5"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-6"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-7"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-8"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-9"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-10"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-11"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-12"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-13"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-14"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-15"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-16"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-17"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-18"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-19"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-20"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
            <div class="box-21"><img src="./static/img/fullpage/201.jpg" alt="陈广安-个人开发"></div>
        </div>
    </div>
    <div class="section s6">
        <div class="box-1"><img src="./static/img/fullpage/7.png" alt="陈广安-个人开发"/></div>
        <div class="box-2"><img src="./static/img/fullpage/9.png" alt="陈广安-个人开发"></div>
        <div class="box-3"><img src="./static/img/fullpage/1.gif" alt="陈广安-个人开发" /></div>
        <div class="box-4"><img src="./static/img/fullpage/2.gif" alt="陈广安-个人开发" /></div>
        <div class="box-5"><img src="./static/img/fullpage/6.png" alt="陈广安-个人开发" /></div>
        <div class="box-6"><img src="./static/img/fullpage/10.png" alt="陈广安-个人开发" /></div>
        <div class="box-7"><img src="./static/img/fullpage/8.png" alt="陈广安-个人开发" /></div>
    </div>
</div>
<script src="./static/plug_in/jquery-1.9.1.min.js"></script>
<script src="./static/plug_in/fullpage/jquery.fullPage.min.js"></script>
<script>
    $(".s4 .zl").on('click',function(){
        $(".s4 .wai-front").css('transform','translateZ(25vw)');
        $(".s4 .wai-back").css('transform','translateZ(-25vw) rotateY(180deg)');
        $(".s4 .wai-left").css('transform','rotateY(-90deg) translateZ(25vw)');
        $(".s4 .wai-right").css('transform','rotateY(90deg) translateZ(25vw)');
        $(".s4 .wai-top").css('transform','rotateX(90deg) translateZ(25vw)');
        $(".s4 .wai-bottom").css('transform','rotateX(-90deg) translateZ(25vw)');
    });

    $(".s4 .bh").on('click',function(){
        $(".s4 .wai-front").css('transform','translateZ(15vw)');
        $(".s4 .wai-back").css('transform','translateZ(-15vw) rotateY(180deg)');
        $(".s4 .wai-left").css('transform','rotateY(-90deg) translateZ(15vw)');
        $(".s4 .wai-right").css('transform','rotateY(90deg) translateZ(15vw)');
        $(".s4 .wai-top").css('transform','rotateX(90deg) translateZ(15vw)');
        $(".s4 .wai-bottom").css('transform','rotateX(-90deg) translateZ(15vw)');
    });


    function changeClass(target,id) {
        var className = $(target).attr('class');
        var ids = document.getElementById(id);
        if(className == 'on'){
            $(target).removeClass('on').addClass('off')
            ids.pause()
        }else{
            $(target).removeClass('off').addClass('on')
            ids.play()
        }
    }

    $(function(){
  
        document.getElementById('media').play();

        $('#dowebok').fullpage({
            sectionsColor: ['', '', '', '','',''],//设置背景颜色
            verticalCentered:false,//取消垂直居中
//             navigation:true,//显示导航
            navigationPosition:'right',//导航右边显示
            anchors:['page1','page2','page3','page4','page5','page6','page7','page8'],
            menu: '#menu'
        });
        if($("body").width()>1400){
            $("body,html").width(520);
        }
        if($("body").width()>600){
            $("body,html").width(420);
        }
    });


    $(".s1 .but-1").click(function(){
        $("#menu").show();
    });
    $(".s1 .but-2").click(function(){
        $("#menu").hide();
    });

</script>
</body>
</html>